<script setup>
import { ref,onMounted } from "vue"
import {useRoute} from "vue-router" 
import axios from "axios"

const route = useRoute()

const myImage = ref(route.query.image)
const myName = ref(route.query.name)

onMounted(()=>{
    document.title = "我的信息 - EvenSO"
    // console.log('account home query:',route.query.image)
})


</script>

<template>
    <div class="myMessageAllBox">
        <div class="myImageBox">
            <img :src="myImage" alt="" />
        </div>
        <div class="myNameBox">
            <span>{{ myName }}</span>
        </div>
    </div>
</template>

<style scoped>
.myMessageAllBox{
    width: 100%;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.myImageBox{
    position: absolute;
    left: 180px;
    top: 0;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 50%;
}
.myImageBox img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.myNameBox{
    position: absolute;
    left: 330px;
    top: 20px;
}
</style>